const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
    mode: "none",
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "dist"),
    },
    devServer: {
    // port: 8080,
    },
    module: {
        rules: [
        // {
        //     test: /\.html$/,
        //     use: 'html-loader'
        // },
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.less$/,
                // loader: "style-loader!css-loader!less-loader",
                use: [
                    'style-loader',
                    "css-loader",
                    'less-loader', // compiles Less to CSS
                ]
            },
            {
                test: /\.css$/,
                // loader: "style-loader!css-loader",
                use: [  //loader从后往前执行
                    'style-loader',
                    "css-loader",
                ]
            },
            {
                test: /\.png$/,
                use: {
                    loader: "url-loader",
                    options: {
                        // 如果使用url-loader,则也要下载file-loader, 超过10kb的文件交给file-loader处理,小于10kb的让url-loader处理,虽然没有引入file-loader,但是url-loader对超出的文件还是会调用file-loader
                        limit: 10 * 1024,
                        /**
                         * 默认情况下，文件加载器生成使用ES modules语法的JS模块。但这里用的commonjs语法，所以设置为false
                         */
                        esModule: false
                    }
                }
            },
            // {
            //   test: /\.js$/,
            //   use: {
            //     loader: "babel-loader",
            //     options: {
            //       presets: ['@babel/preset-env']
            //     }
            //   }
            // }
            // {
            //     test: /\.png$/,
            //     use: 'file-loader'
            // }

        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        // new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'webpack-vue-sample',
            // template: './public/index.html'
            /**
       * public目录下的index.html使用了变量，
       * 而上面又采用了html-loader，所以导致解析失败， webpack官方有说明，
       * 以ejs结尾，便不会解析冲突
       *
       */
            template: './public/index.html',
            // url: BASE_URL,  //需要这里传参 /

        }),
    // new CopyWebpackPlugin({
    //   //可以是通配符，也可以是相对路径
    //   // 'public/**'
    //   patterns: [
    //     'public/'
    //   ]
    // })
    ]
}